<template>
  <div>
    <a-card :bordered="false">
      <div style="display: flex; flex-wrap: wrap">
        <head-info title="所有申报项目" :content="projectInfoList.length" :bordered="true"/>
        <head-info title="审核中" content="6个" :bordered="true"/>
        <head-info title="已通过" content="4个"/>
        <head-info title="不通过" content="2个"/>
      </div>
    </a-card>
    <a-card
        style="margin-top: 24px"
        :bordered="false"
        title="标准列表"
    >
      <div slot="extra">
        <a-radio-group>
          <a-radio-button @click="getRoleTest">全部</a-radio-button>
          <a-radio-button>审核中</a-radio-button>
          <a-radio-button>已通过</a-radio-button>
          <a-radio-button>不通过</a-radio-button>
        </a-radio-group>
        <a-input-search style="margin-left: 16px; width: 272px;" />
      </div>
<!--      <a-button type="dashed" style="width: 100%" icon="plus" @click="goAddProject">添加</a-button>-->
      <a-list size="large">
        <a-list-item :key="item.project_info_id" v-for="item in projectInfoList">
          <a-list-item-meta
              :description="item.project_tip"
          >
            <a-avatar slot="avatar" size="large" shape="square" src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png"/>
            <a slot="title" @click="goProjectInfo(item)">{{ item.project_name }}</a>
          </a-list-item-meta>
          <div slot="actions" v-if="item.project_check === 2">
            <a-button type="primary" icon="edit" @click="goModifyProject(item)">编辑</a-button>
          </div>
          <div slot="actions" v-if="item.project_check !== 2">
            <a-button type="danger" icon="delete" @click="deleteProject(item.project_info_id)">删除</a-button>
          </div>
          <div class="list-content">
<!--            <div class="list-content-item">-->
<!--              <span>Owner</span>-->
<!--              <p>{{ item.company_user_id }}</p>-->
<!--            </div>-->
            <div class="list-content-item">
              <span>创建时间</span>
              <p>{{ item.project_time }}</p>
            </div>
            <div class="list-content-item">
              <a-tag color="blue" style="color: #2db7f5" v-if="item.project_check === 0">
                审核中
              </a-tag>
              <a-tag color="green" style="color: #87d068" v-if="item.project_check === 1">
                已通过
              </a-tag>
              <a-tag color="red" style="color: #f50" v-if="item.project_check === 2">
                未通过
              </a-tag>
            </div>
          </div>
        </a-list-item>
      </a-list>
    </a-card>
  </div>
</template>

<script>
import HeadInfo from '../../../components/tool/HeadInfo'
import Axios from 'axios'

const projectList = []
// 大致模拟一下后端传过来的数据
const project = {
  project_info_id : 0,
  project_class_id: 0,
  project_name: "测试用项目名称",
  project_tip: "项目简介，啊吧啊吧",
  company_id: 0,
  company_user_id: 0,
  // 参选理由
  project_reasion: "一长串理由",
  // 正文
  project_content: "",
  project_time: new Date().toLocaleString(),
  // 是否经过初选，默认为0，通过为1
  project_check: 0,
  // 投票计数
  counts: 0
}
for (let i = 0; i < 6; i++) {
  if(i === 1) {
    projectList.push({
      project_info_id : i,
      project_class_id: 0,
      project_name: "测试用项目名称" + i,
      project_tip: "项目简介，啊吧啊吧",
      company_id: 0,
      company_user_id: 0,
      // 参选理由
      project_reasion: "一长串理由，一长串理由",
      project_content: "很详细的介绍了该项目的所有技术特色与创新点",
      project_time: new Date().toLocaleString(),
      // 是否经过初选，默认为0，通过为1
      project_check: 1,
      // 投票计数
      counts: 1
    })
  }
  if(i === 2) {
    projectList.push({
      project_info_id : i,
      project_class_id: 0,
      project_name: "测试用项目名称" + i,
      project_tip: "项目简介，啊吧啊吧",
      company_id: 0,
      company_user_id: 0,
      // 参选理由
      project_reasion: "",
      project_content: "",
      project_time: new Date().toLocaleString(),
      // 是否经过初选，默认为0，通过为1
      project_check: 2,
      // 投票计数
      counts: 0
    })
  } else {
    projectList.push({
      project_info_id : i,
      project_class_id: 0,
      project_name: "测试用项目名称" + i,
      project_tip: "项目简介，啊吧啊吧",
      company_id: 0,
      company_user_id: 0,
      // 参选理由
      project_reasion: "",
      project_content: "",
      project_time: new Date().toLocaleString(),
      // 是否经过初选，默认为0，通过为1
      project_check: 0,
      // 投票计数
      counts: 0
    })
  }
}

export default {
  name: 'ApplicationItems',
  components: {HeadInfo},
  data() {
    return {
      projectInfoList: [],
      url: this.$store.state.apiUrl + ':' + this.$store.state.apiPort,
      project,
      projectList
    }
  },
  computed: {
  },
  comments: {
    // 检测访问者是否为专家，这个页面好像用不到，测试用
    visitor() {
      if (this.$auth('specialist', 'role')) {
        return 'specialist'
      }else
        return ''
    }
  },
  mounted() {
    this.getAllProjectList()
  },
  methods: {
    // 获取所有项目列表
    getAllProjectList() {
      Axios.get(this.url + '/pxManagerSystem/getAllProjects')
          .then((res) => {
            if (res.data.state !== 200) {
              this.$message.error('数据为空')
            }
            // 获取数据
            this.projectInfoList = res.data.data?.projectInfolist
          }).catch(err => {
        console.log(err)
      })
    },
    deleteProject(id) {
      Axios.delete(this.url + '/pxManagerSystem/deleteProjectByProjectInfoId', {
        project_info_id: id
      }).then(res => {
        console.log(res)
        this.$message.success(res.data.message)
      }).catch(err => {
        console.log(err)
      })
    },
    // 跳转项目详情页
    goProjectInfo(item) {
      this.$router.push({
        name: '申报项目详情',
        params: {
          project: item,
        }
      })
    },
    // 跳转修改项目页面
    goModifyProject(item) {
      this.$router.push({
        name: '修改申报项目',
        params: {
          project: item,
          visitor: this.visitor
        }
      })
    },
    getRoleTest() {
      console.log(this.$auth('specialist', 'role'))
    }
  }
}
</script>

<style lang="less" scoped>
.list-content-item{
  color: @text-color-second;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
  span{
    line-height: 20px;
  }
  p{
    margin: 4px 0 0;
    line-height: 22px;
  }
}
</style>
